import React from "react";
import TheTable from "@/components/TheTable";
// import TheButton from "@/components/TheButton";
import "../style/style.less";
import ThePagination from "../../../components/ThePagination";
import { apiGetLog, apiGetVentNameList, apiGetModuleList } from "@/request/system/operationLogs";
import TheQueryForm from '../../../components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash'
import { Tooltip } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";

// let options = []
class List extends React.Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef()

    this.state = {
      down_loading: false,
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "模块",
          dataIndex: "module",
          key: "module",
        },
        {
          title: "事件",
          dataIndex: "operationContent",
          key: "operationContent",
        },
        {
          title: "操作接口",
          dataIndex: "requestUri",
          key: "requestUri",
        },
        {
          title: "执行状态",
          dataIndex: "state",
          key: "state",
          render: (text, render) => {
            let label
            switch (render.state) {
              case 1:
                label = "成功"
                break;
              case 2:
                label = "失败"
                break;
              default:
                label = "字段值错误"
            }
            return label
          }
        },
        {
          title: "操作人",
          dataIndex: "operationUserName",
          key: "operationUserName",
        },
        {
          title: "操作人Id",
          dataIndex: "operationUserId",
          key: "operationUserId",
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          key: "createTime",
          render: (text, record) => {
            return record.createTime ? record.createTime : "/"
          }
        },
        {
          title: "操作内容",
          dataIndex: "operationContent",
          key: "operationContent",
        },
        {
          title: "请求耗时(毫秒)",
          dataIndex: "executionTime",
          key: "executionTime",
        },
        {
          title: "请求参数",
          dataIndex: "requestParams",
          key: "requestParams",
          render: (text) => {
            return <Tooltip zIndex={999} placement="top" title={() => {
              return text
            }}>
              <QuestionCircleOutlined />
            </Tooltip>
          }
        },
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      searchValue: {},
      newColumns: [],
      form_show: true,
      searchOption: [
        { field: 'operationUserId', label: '操作人ID', placeholder: '操作人ID', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'requestUri', label: '操作接口', placeholder: '操作接口', required: false, rules: [], type: 'Input', defaultValue: '' },
        {
          field: 'state', label: '执行状态', placeholder: '请输入', required: false, rules: [], type: 'Select', options: [
            { value: '1', label: '成功' },
            { value: '2', label: '失败' },
          ], defaultValue: ''
        },
        { field: 'time', label: '操作时间', type: 'RangePicker' },
        {
          field: 'module', label: '模块', placeholder: '请输入', required: false, rules: [], type: 'Cascader', options: [ ], defaultValue: ''
        },
        {
          field: 'operationContent', label: '事件名称', placeholder: '事件名称', required: false, rules: [], type: 'Cascader', defaultValue: '', option: []
        },
      ],
      queryForm: {},
    };
  }
  async componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName === 'operationLogs') {
      this.setState({
        queryForm,
        pageData: {
          pageNo: pageNo, pageSize: pageSize
        }
      }, () => {
        this.queryFormRef.onSetDefault({
          ...queryForm
        })
        this.getData()
      })
    } else {
      this.getData()
    }
    this.getSearch()
    this.getModule()
  }
  getSearch = async () => {
    let { searchOption } = this.state
    let res = await apiGetVentNameList()
    if (res.code === 0) {
      searchOption[searchOption.length - 1].option = res.data.map(item => {
        return {
          value: item,
          label: item,
        }
      })
      this.setState({
        searchOption
      })
    }
  }
  getModule = async () => {
    let { searchOption } = this.state
    let res = await apiGetModuleList()
    if (res.code === 0) {
      searchOption[4].option = res.data.map(item => {
        return {
          value: item,
          label: item,
        }
      })
      this.setState({
        searchOption
      })
    }
  }

  getData = async (values) => {
    let { pageNo, pageSize } = this.state.pageData
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      let { ...form } = { ...this.state.queryForm }
      const params = {
        pageNo, pageSize, queryForm: { ...form }
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'operationLogs',
          ...params
        }
      })
      let res = await apiGetLog({
        pageNo, pageSize, ...form,
      })
      if (res.code === 0 && res.data) {
        this.setState({ dataSource: res.data, pageData: { pageNo: res.pageNo, pageSize: res.pageSize }, total: res.totalCount })
      }
    })
  }

  getValue = (value) => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.getData()
    })
  }
  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }
  onFormSearch(values) {
    if (values && !_.isEmpty(values.time)) {
      values.createStartTime = getDateTime3(values.time[0]) + " 00:00:00"
      values.createEndTime = getDateTime3(values.time[1]) + " 23:59:59"
      delete values.time
    }
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }
  render() {
    const {
      columns,
      dataSource,
      pageData,
      total,
      // down_loading,
      form_show, searchOption, newColumns
    } = this.state;
    const { pageNo, pageSize } = pageData
    return (
      <div className={"p-layout-box commodity-content"}>
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)} >
        </TheQueryForm>
        <TheTableExtend
          columns={columns}
          onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
          onTableRefresh={() => this.getData()}
          onColumnsFilter={(value) => this.onColumnsFilter(value)}
        >
        </TheTableExtend>
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={newColumns}
            dataSource={dataSource}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default List;
